<template>
    <div class="morder">
        <div class="navbar" v-cloak >
            <div class="navbar-item" :class="{on: index == switchItem}" v-for="(item, index) in navbar" :key="index" @click="navbarSwitch(item, index)">
                {{ item.label }}
            </div>
        </div>
        <div id="mescroll" class="mescroll" v-cloak>
            <div id="dataList" class="order-list">
                <a :href="'/member/shop/order/' + order.id" class="order-item" v-for="(order, index) in orderList" :key="index" >
                    <div class="order-item-hd">
                        <div class="order-item-hd-l">
                            {{ order.shop.name }}
                        </div>
                        <div :class="order.status | orderStatusClass">
                            {{ order.status_label }}
                        </div>
                    </div>
                    <div class="order-item-bd">
                        <div class="order-item-bd-l">
                            <img class="order-img" :src="'/' + order.order_items[0].product_pic" alt="">
                        </div>
                        <div class="order-item-bd-m">
                            <div class="order-name">{{ order.order_items[0].product_name }} {{ order.order_items[0].product_info }}</div>
                            <div class="order-address">{{ order.address }}</div>
                             <div class="order-info">规格:{{ order.product_spec }}  类型: 龙虾</div>
                        </div>
                        <div class="order-item-bd-r">
                            {{ order.order_items[0].product_price }} / {{ order.order_items[0].product_unit }}
                        </div>
                    </div>  
                    <div class="order-item-bt">
                        <div class="order-item-bt-l">
                            下单时间 {{ order.created_at }}
                        </div>
                        <div class="order-item-r">
                            1斤
                        </div>
                    </div>
                    <div class="order-item-fd">
                        <span class="order-amount">
                            ¥ {{ order.order_amount }}
                        </span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                orderList: [],
                navbar: [
                    {
                        label: '全部',
                        value: 'all'
                    },
                    {
                        label: '待确认',
                        value: 'unconfirmed'
                    },
                    {
                        label: '待发货',
                        value: 'paid'
                    },
                    {
                        label: '已完成',
                        value: 'completed'
                    }
                ],
                queryList: {
                    status: 'all'
                },
                switchItem: 0,
            }
        },
        mounted: function () {
            var self = this;
            this.mescroll = new MeScroll("mescroll", {
                up: {
                    callback: self.getOrders,
                    isBounce: false,
                    noMoreSize: 4,
                    empty: {
                        warpId: "dataList",
                        icon: "/images/mescroll-empty.png"
                    },
                    toTop: {
                        src: "/images/mescroll-totop.png",
                    }
                }
            });
        },
        methods: {
            navbarSwitch: function (item, index) {
                this.switchItem = index;
                this.queryList.status = item.value;

                //重置列表数据
                this.orderList = [];
                this.mescroll.resetUpScroll();
                //隐藏回到顶部按钮
                this.mescroll.hideTopBtn();
            },
            getOrders: function (page) {
                axios.get('/member/shop/order', {
                    params: {
                        page: page.num,
                        size: page.size,
                        status: this.queryList.status,
                        type: 'sold'
                    }
                }).then(response => {
                    let curPageData = response.data.data;
                    if (page.num == 1) this.orderList = [];
                    this.orderList = this.orderList.concat(curPageData);
                    this.mescroll.endSuccess(curPageData.length);
                }).catch( err => {
                    console.log(err);
                });
            },
        },
        filters: {
            orderStatusClass: function(status) {
                let osc = 'order-item-hd-r';
                return osc + ' ' + 'order_status_' + status;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .order_status_unconfirmed,
    .order_status_unpaid {
        color: #FF0000 !important;
    }
    .order_status_paid,
    .order_status_delivering,
    .order_status_completed {
        color: #04a25c !important;
    }
    .order_status_cancelled {
        color: #999 !important;
    }
</style>
